<template>
    <Dialog
      :show="dialogConfig.show"
      :title="dialogConfig.title"
      :buttons="dialogConfig.buttons"
      :showCancel="true"
      @close="dialogConfig.show = false"
        :width="600+'px'"
    >
     <div  >
        <el-form
        :model="formData"
        :rules="rules"
        ref="formDataRef"
        @submit.prevent
      >
      <el-form-item label="封面" prop="avatar" label-width="80px">
            <ActivityAvatarUpload v-model="formData.activityAvatar"></ActivityAvatarUpload>
          </el-form-item>
        <el-form-item label="活动标题" prop="title" label-width="80px">
          <el-input :maxLength="400" v-model="formData.title" />
        </el-form-item>

        <el-form-item label="活动类型" prop="type"  label-width="80px">
          <el-select
            v-model="formData.type"
            placeholder="请选择活动类型"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in activityTypeList"
              :key="item.id"
              :label="item.desc"
              :value="item.id"
            />
          </el-select>
        </el-form-item>


        <el-form-item label="地址" prop="location"  label-width="80px">
          <el-input v-model="formData.location" />
        </el-form-item>
        <el-form-item label="日期 :" label-width="80px">
                <el-date-picker
                  v-model="formData.startTimeDateRange"
                  type="datetimerange"
                  range-separator="~"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  @change="loadDataList"
                ></el-date-picker>

              </el-form-item>



        <el-form-item label="计划人数" prop="maxParticipants"  label-width="80px">
          <el-input v-model="formData.maxParticipants" />
        </el-form-item>

        <el-form-item label="加入类型" prop="joinType" label-width="80px">
          <el-radio-group v-model="formData.joinType">
            <el-radio :value="0">直接加入</el-radio>
            <el-radio :value="1">审核后加入</el-radio>
           </el-radio-group>
        </el-form-item>

        <el-form-item label="描述" prop="description" label-width="80px">
          <el-input type="textarea" v-model="formData.description" :rows="4" />
        </el-form-item>
      </el-form>
     </div>
    </Dialog>
  </template>

  <script setup>
  import ActivityAvatarUpload from "@/components/ActivityAvatarUpload.vue";

  import { ref, reactive, getCurrentInstance, nextTick } from "vue";
  const { proxy } = getCurrentInstance();

  const api = {
    saveAccount: "/activityInfo/saveActivity",
  };


  const dialogConfig = ref({
    show: false,
    title: "",
    buttons: [
      {
        type: "primary",
        text: "确定",
        click: (e) => {
          submitForm();
        },
      },
    ],
  });

  const formData = ref({

  });
  const formDataRef = ref();

  const validateRePass = (rule, value, callback) => {
    if (value !== formData.value.password) {
      callback(new Error(rule.message));
    } else {
      callback();
    }
  };

  const rules = {
    title: [{ required: true, message: "请输入标题" }],
    type: [{ required: true, message: "请选择活动类型" }],
    category: [{ required: true, message: "请输入分类" }],
    location: [{ required: true, message: "请输入活动地址" }],
    joinType: [{ required: true, message: "请选择加入类型" },
    {
        validator: proxy.Verify.number,
        trigger: "blur",
        message: "请输入正确的数字",
      },
    ],
    maxParticipants: [{ required: true, message: "请输入计划招募人数" },
    {
        validator: proxy.Verify.number,
        trigger: "blur",
        message: "请输入正确的数字",
      },
    ],
    availableDays: [{ required: true, message: "请输入允许借阅天数" },
    {
        validator: proxy.Verify.number,
        trigger: "blur",
        message: "请输入正确的数字",
      },
    ],
    publishPress: [{ required: true, message: "请输入出版社" }],

    phone: [
      { required: true, message: "请输入手机号" },
      {
        validator: proxy.Verify.phone,
        trigger: "blur",
        message: "请输入正确的手机号",
      },
    ],
    email: [
      {
        validator: proxy.Verify.email,
        trigger: "blur",
        message: "请输入正确的邮箱",
      },
    ],
    roleType: [{ required: true, message: "请选择角色" }],
  };

const activityTypeList=[
    {
        id:1,
        desc:"社区服务"
    },
    {
        id:2,
        desc:"扶贫减贫"
    },
    {
        id:3,
        desc:"资教助学"
    }, {
        id:4,
        desc:"卫生健康"
    },
    {
        id:5,
        desc:"法律服务"
    } ,{
        id:7,
        desc:"环境保护"
    },{
        id:8,
        desc:"科技科普"
    },{
        id:9,
        desc:"文化艺术"
    }
];

  const showEdit = (data) => {
    debugger;
    dialogConfig.value.show = true;
    nextTick(() => {
      formDataRef.value.resetFields();
      if (data.activityId == null) {
        formData.value.startTimeDateRange=null;
        formData.value.activityAvatar=null;
        dialogConfig.value.title = "新增活动";
      } else {
        dialogConfig.value.title = "修改活动信息";
        let editData = Object.assign({}, data);
        formData.value = Object.assign({}, editData);
        formData.value.startTimeDateRange=new Array(editData.startTime,editData.endTime);
        formData.value.activityAvatar={activityId:data.activityId};
      }

    });
  };

  defineExpose({
    showEdit,
  });

  const emit = defineEmits(["reload"]);
  const submitForm = async () => {

    formDataRef.value.validate(async (valid) => {
      if (!valid) {
        return;
      }

      let params = {};
      Object.assign(params, formData.value);
      params.avatar= formData.value.activityAvatar;
      if (formData.value.startTimeDateRange) {
      params.startTime = formData.value.startTimeDateRange[0];
      params.endTime = formData.value.startTimeDateRange[1];
     }
      delete params.expirationDateRange;
      let result = await proxy.Request({
        url: api.saveAccount,
        params,
      });
      if (!result) {
        return;
      }
      dialogConfig.value.show = false;
      proxy.Message.success("保存成功");
      emit("reload");
    });
  };
  </script>

  <style lang="scss" scoped>
  .check-span-item {
    float: left;
    margin-right: 10px;
    line-height: 20px;
  }
  </style>
